<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #F0F0F0;
    }
  </style>
  <script src="js/konva.js"></script>
  <script src="js/circle.js"></script>
</head>
<body>
<div id="container"></div>
<script>
  var width = window.innerWidth;
  var height = window.innerHeight;
  var stage = new Konva.Stage({
    container: 'container',
    width: width,
    height: height
  });
  var layer = new Konva.Layer();
  //背景组
  var groupBg = new Konva.Group({
    x: stage.width()/2,
    y: stage.height()/2
  });
  //最外层的圆
  var outCircle=new Konva.Circle({
    x: 0,
    y: 0,
    radius: 216,
    stroke: '#ccc',
    strokeWidth: 1,
    dash: [6,4]
  });
  groupBg.add(outCircle);
  //添加中间的圆
  var midCircle=new Konva.Circle({
    x: 0,
    y: 0,
    radius: 137,
    stroke: '#aaa',
    strokeWidth: 1,
    dash: [6,4]
  });
  groupBg.add(midCircle);
  //添加里面的圆
  var innerCircle=new Konva.Circle({
    x: 0,
    y: 0,
    radius: 120,
    stroke: '#122e7c',
    strokeWidth: 2,
    dash: [10,5]
  });
  groupBg.add(innerCircle);
  //添加里面圆的圆环
  var outRing=new Konva.Circle({
    x: 0,
    y: 0,
    radius: 90,
    fill: '#555',
    opacity:0.2
  });
  groupBg.add(outRing);
  //添加最里面实心圆
  var innerRing=new Konva.Circle({
    x: 0,
    y: 0,
    radius: 65,
    fill: '#2a3466'
  });
  groupBg.add(innerRing);
  //添加文本
  var simpleText = new Konva.Text({
    x: -65,
    y: -12,
    text: 'Web 全栈',
    fontSize: 24,
    fontFamily: 'Calibri',
    fill: '#fff',
    align:'center',
    width:130
  });
  groupBg.add(simpleText);
  layer.add(groupBg);
  //绘制顺时针的组
  var outGroup = new Konva.Group({
    x: stage.width()/2,
    y: stage.height()/2
  });
  //创建一个0度的圆环
  for(var i=0;i<4;i++){
    var circle0=new Circle({
      x:216*Math.cos(90*i*Math.PI/180),
      y:216*Math.sin(90*i*Math.PI/180),
      outR:55,
      innerR:45,
      fill:'pink',
      outOpacity:0.2,
      innerOpacity:0.7,
      text:'WebApp',
      fontSize:16,
      color:'#fff',
    });
    circle0.buildCircle(outGroup);
  }
  layer.add(outGroup);
  //添加动画
  //设置每秒运动的速度
  var step=3;
  var anim = new Konva.Animation(function(frame) {
    //frame.time两帧之间间隔的时间
    outGroup.rotate(step);
    //文字看起来不能转，可以向反方向转
    outGroup.getChildren().each(function(item,index){
      item.rotate(-step);
    });
  }, layer);
  anim.start();
  //添加事件
  //给顺时针转的组改变速度
  outGroup.on('mouseover', function() {
    step=1;
  });
  outGroup.on('mouseleave', function() {
    step=3;
  });
  stage.add(layer);
</script>
</body>
</html>